<template>
  <a-tabs v-model:activeKey="activeKey" destroyInactiveTabPane size="large">
    <a-tab-pane key="mine" tab="我创建的">
      <ScrollListWithFilter
        :getListMethod="getMyIndicatorSystem"
        :createButtonProps="{
          text: '新建指标体系',
          href: '#/indicators/create',
        }"
        searchPlaceholder="搜索指标体系名称"
        :detailPath="detailPath"
        nameKey="name"
        descKey="intro"
      >
        <template #cardFooter="{ record }">
          <component
            v-for="(item, index) in cardFooters(record)"
            :key="index"
            :is="item"
          />
        </template>
      </ScrollListWithFilter>
    </a-tab-pane>
    <a-tab-pane key="all" tab="指标库">
      <ScrollListWithFilter
        :getListMethod="getAllIndicatorSystem"
        searchPlaceholder="搜索指标体系名称"
        :detailPath="detailPath"
        nameKey="name"
        descKey="intro"
      >
        <template #cardFooter="{ record }">
          <component
            v-for="(item, index) in cardFooters(record)"
            :key="index"
            :is="item"
          />
        </template>
      </ScrollListWithFilter>
    </a-tab-pane>
  </a-tabs>
</template>
<script lang="tsx" setup>
import { getMyIndicatorSystem, getAllIndicatorSystem } from "@/api";
import { createFilterCondtitionForm } from "./config";
import ScrollListWithFilter from "@/components/ScrollListWithFilter.vue";
import dayjs from "dayjs";
import { h, ref } from "vue";
const activeKey = ref("mine");
const detailPath = (item: Record<string, any>) =>
  `/indicators/detail/${item.id}/basicinfo`;
// const handleWeightsAdjust = (record: Record<string, any>) => {
//   router.push(`/indicators/detail/${record.id}/indicator?isWeightsChange=true`);
// };
const cardFooters = (record: Record<string, any>) => [
  h(
    <p class="indicators">
      {createFilterCondtitionForm.map((indicator) => (
        <span
          class="indicator-item"
          key={indicator.key}
          v-show={record[indicator.key]}
        >
          {indicator.label}：{record[indicator.key]}
        </span>
      ))}
    </p>
  ),
  h(
    <p style="flex: none">
      创建时间：{dayjs(record.createdTime).format("YYYY-MM-DD HH:mm")}
    </p>
  ),
  // ...(isMine
  //   ? [
  //       h(
  //         <a-button
  //           class="button__weights"
  //           onclick={() => handleWeightsAdjust(record)}
  //         >
  //           权重调整
  //         </a-button>
  //       ),
  //     ]
  //   : []),
];
</script>
<style lang="scss" scoped>
.indicators {
  flex: 1;
}
.indicator-item {
  display: inline-block;
  margin-right: 24px;
}
:deep(.ant-tabs-nav) {
  background-color: #fff;
  margin-bottom: 0;
  padding: 0 16px;
}
.button__weights {
  position: absolute;
  top: 16px;
  right: 100px;
}
</style>
